<template>
  <div class="userInfoBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">个人信息</x-header>
    <div class="userList flex">
      <div class="label">头像</div>
      <div class="rightContent">
        <img :src="user.img" alt />
      </div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">教练等级</div>
      <div class="rightContent">二级教练</div>
    </div>
    <div class="userList flex">
      <div class="label">性别</div>
      <popup-picker class="rightContent" :data="sexList" v-model="user.sex"></popup-picker>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <router-link :to="{ name: 'registerNum', query: { num: user }}" class="userList flex">
      <div class="label">注册编号</div>
      <div class="rightContent">{{user.registerNum}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </router-link>
    <div class="userList flex">
      <div class="label">身份证号</div>
      <div class="rightContent">{{user.IDCard}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">出生日期</div>
      <datetime
        class="rightContent"
        v-model="user.birthday"
        start-date="1970-01-01"
        end-date="2019-12-12"
        format="YYYY-MM-DD"
      ></datetime>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">联系电话</div>
      <div class="rightContent">{{user.phone}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">工作邮箱</div>
      <div class="rightContent">{{user.email}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">毕业院校</div>
      <div class="rightContent">{{user.school}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
    <div class="userList flex">
      <div class="label">所学专业</div>
      <div class="rightContent">{{user.major}}</div>
      <x-icon type="ios-arrow-right" size="24" class="rightIcon"></x-icon>
    </div>
  </div>
</template>

<script>
import { XHeader, PopupPicker, Datetime, Group } from 'vux'
export default {
  components: {
    XHeader,
    PopupPicker,
    Datetime,
    Group
  },
  data() {
    return {
      user: {
        id: '1',
        userName: '罗小飞',
        sex: ['女'],
        grade: '二级教练',
        certificate: '3',
        status: '审批中',
        img: require('../assets/img/img_tx_1.png'),
        registerNum: '2131464651321',
        IDCard: '110111199002022121',
        birthday: '1990-02-02',
        phone: '13565498852',
        email: '31321135@163.com',
        school: '清华大学',
        major: '量子力学',
      },
      sexList: [['男', '女', '不告诉你']]
    }
  },
  methods: {
    showDate() {
      console.log(111)
      this.$nextTick(() => {
        this.$vux.datetime.show({
          // cancelText: '取消',
          // confirmText: '确定',
          // format: 'YYYY-MM-DD',
          // value: '2000-05-20',
          // onConfirm(val) {
          //   this.user.birthday = val
          // },

        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userInfoBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
    }
  }
  .userList {
    color: currentColor;
    padding: 20px;
    font-size: 30px;

    .label {
      // font-weight: bold;
    }
    .rightContent {
      color: #b3b3b3;
      margin-left: auto;
      img {
        widows: 80px;
        height: 80px;
        border-radius: 10px;
        margin-top: 10px;
      }
    }
    .rightIcon {
      fill: #b3b3b3;
      margin-left: 10px;
    }
  }
  /deep/.vux-cell-box:not(:first-child):before {
    content: none;
  }
  /deep/.weui-cell:before {
    content: none;
  }
  /deep/.weui-cell {
    padding: 0;
  }
  /deep/.weui-cell__ft {
    padding-right: 0;
  }
  /deep/.weui-cell__ft:after {
    content: none;
  }
  /deep/.vux-cell-value {
    color: #b3b3b3;
  }
}
</style>